<script setup lang="ts">
  import { ref, computed } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import Dialog from "@/components/Dialog.vue";
  import mInput from "@/components/m-input.vue";
  import { clo, objDiff } from "@/util";
  const data = ref<gt.sql.addr[]>([]),
    dig = ref<InstanceType<typeof Dialog>>(),
    formData = ref<gt.sql.addr>(format.def.addr),
    isDef = computed(() => {
      return !!formData.value.def;
    }),
    refresh = ref(0);
  let isBack = 0;
  function sort() {
    gd.addr.sort((a, b) => b.createTime - a.createTime);
    const i = gd.addr.findIndex(e => e.def);
    if (i > 0) {
      const t = gd.addr[i];
      gd.addr.splice(i, 1);
      gd.addr.unshift(t);
    }
    refresh.value ^= 1;
    data.value = gd.addr;
  }
  async function fetch() {
    await gd.addr.read();
    sort();
  }
  async function init(p?: obj) {
    if (p) {
      isBack = p.back ? 1 : 0;
      p.create && open();
    }
    fetch();
  }
  onLoad(init);
  uni.$once("loaded", () => {
    uni.setNavigationBarTitle({ title: "收货地址" });
  });
  async function open(p?: gt.sql.addr) {
    while (!dig.value) {
      await next();
    }
    const def = p || format.def.addr;
    formData.value = clo(def);
    dig.value.open({
      async confirm() {
        const d: any = Object.assign({ id: def.id }, objDiff(def, formData.value));
        if (Object.keys(d).length > 1) {
          if (d.id) {
            await gd.addr.update(d);
            Object.assign(def, formData.value);
          } else {
            const t = await gd.addr.create(d);
            d.id = t.id;
          }
          await fetch();
        }
        if (isBack && d.id) {
          uni.setStorageSync("addr", d.id);
          uni.navigateBack({ animationType: "zoom-fade-in" });
        }
      },
    });
  }
  function setDef(p: gt.sql.addr) {
    gd.addr.forEach(e => {
      e.def = 0;
    });
    p.def = 1;
    gd.addr.update({ id: p.id, def: 1 });
    sort();
  }
  function del(p: number) {
    const t = data.value[p];
    if (t) {
      data.value.splice(p, 1);
      gd.addr.deleteById(t.id);
    }
  }
  function defChange(p: any) {
    formData.value.def = p.detail.value ? 1 : 0;
  }
</script>
<template>
  <view class="addr y">
    <view class="data wf" :key="refresh">
      <view class="box y wf" v-for="(a, ai) in data" :key="ai" @click="open(a)">
        <view class="line x wf">
          <text class="label">联系人:</text>
          <text class="value">{{ a.name }}</text>
        </view>
        <view class="line x wf">
          <text class="label">联系电话:</text>
          <text class="value">{{ a.phone }}</text>
        </view>
        <view class="line x wf">
          <text class="label">收货地址:</text>
          <text class="value">{{ a.addr }}</text>
        </view>
        <view class="setdef x jc" @click.stop="setDef(a)">
          <view class="setdefc" v-if="ai">设为默认</view>
          <view class="ml1em mac-ico-delete" @click.stop="del(ai)" />
        </view>
      </view>
    </view>
    <view class="float" @click="open()" />
    <Dialog title="编辑收货信息" ref="dig">
      <view class="line x wf">
        <text class="label">联系人:</text>
        <mInput class="value" v-model="formData.name" placeholder="请输入联系人" />
      </view>
      <view class="line x wf">
        <text class="label">联系电话:</text>
        <mInput class="value" v-model="formData.phone" placeholder="请输入联系电话" />
      </view>
      <view class="line x wf">
        <text class="label">详细地址:</text>
        <mInput class="value" v-model="formData.addr" placeholder="请输入详细地址" />
      </view>
      <view class="line x wf">
        <text class="label">设为默认:</text>
        <switch class="value" :checked="isDef" @change="defChange" />
      </view>
    </Dialog>
  </view>
</template>
<style lang="scss" scoped>
  .addr {
    position: relative;
    padding: 0 0.4em;
    >.data {
      >.box {
        width: 100%;
        margin-top: 1em;
        padding: 0.4em;
        background-color: #fff;
        border-radius: 0.4em;
        position: relative;
        >.setdef {
          position: absolute;
          bottom: 0.4em;
          right: 0.4em;
          color: $uni-text-color-placeholder;
          >.setdefc::before {
            content: "\e605";
            color: $uni-color-warning;
            margin-right: 0.4em;
          }
          >.mac-ico-delete {
            color: $uni-color-error;
          }
        }
      }
    }

    >.float {
      position: fixed;
      bottom: 2em;
      right: 2em;
    }
    >.float::after {
      content: "\e645";
      color: $uni-color-success;
      font-size: 2.4em;
    }
    .line {
      margin-top: 0.4em;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      >.label {
        width: 5em;
        flex-shrink: 0;
        text-align: right;
        padding-right: 0.4em;
        color: $uni-text-color-placeholder;
      }
      >.value {
        flex-grow: 1;
      }
    }

  }
</style>